<template>
	<view>
		<OverviewTop :alarmNum="alarmNum" :warningStatisticsData="warningStatisticsData" />
		<OverviewMiddle ref="overviewMiddleRef" :loading="loading" :axisData="axisData" @filtrate="queryLineChart" />
		<OverviewBottom :warningList="warningList" :total="total" @load_more="getwarningListPage" :status="status" />

		<!-- 回到顶部 -->
		<u-back-top :scroll-top="scrollTop" tips="顶部" duration="200" :custom-style="customStyle" :icon-style="iconStyle"
			icon="arrow-up"></u-back-top>
		<!-- 加载动画 -->
		<u-page-loading v-if="loading" />
	</view>
</template>

<script>
	import OverviewTop from './components/top.vue'
	import OverviewMiddle from './components/middle.vue'
	import OverviewBottom from './components/bottom.vue'
	import * as home from '@/api/home.js'
	import {
		checkLogin
	} from '@/utils/app.js'

	export default {
		components: {
			OverviewTop,
			OverviewMiddle,
			OverviewBottom,
		},
		data() {
			return {
				loading: false, // 加载状态
				alarmNum: {
					average: 0,
					high: 0,
					in: 0,
					low: 0,
					all: 0, // 预警总量
				},
				axisData: {},
				warningList: [], // 预警列表
				total: 0, // 预警总数
				warningStatisticsData: [], // 今日预警列表
				params: { // 预警分页配置
					pageSize: 10,
					pageNum: 1
				},
				totalPageNum: undefined, // 分页总页数
				status: 'loadmore', // 加载更多状态
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#2979ff'
				},
				customStyle: {
					fontSize: '32rpx',
					color: '#2979ff',
					backgroundColor: '#A0CFFF',
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		async onLoad() {
			await this.initData()
		},
		mounted() {
			let app = this
			// 初始化页面挂载事件
			uni.$on('update', function(data) {
				app.initData() //触发更新后
			})
		},
		//为了优化代码，可以加上移除事件，避免重复监听事件
		onUnload() {
			// 移除监听事件  
			uni.$off('update');
		},

		// 监听用户下拉刷新动作
		async onPullDownRefresh() {
			let app = this
			app.$refs.overviewMiddleRef.current = 0
			await app.initData()

		},

		methods: {
			initData() {
				// 判断是否已登录
				this.loading = true
				// this.setSubscribe(), this.setOpenId() 两个方法是向后端发送code设置登录已经订阅的openid
				Promise.all([this.getListAll(), this.queryLineChart(), this.getwarningListPage(), this.setSubscribe(), this
					.setOpenId(), this.getWarningStatistics()
				]).then((result) => {
					// this.loading = false
				}).catch((error) => {
					console.log(error);
				}).finally(() => {
					setTimeout(() => {
						this.loading = false
					}, 500)
					uni.stopPullDownRefresh(); //停止刷新
				})
			},
			// 获取今日预警列表
			getWarningStatistics() {
				return new Promise((resolve, reject) => {
					home.getWarningStatistics().then(res => {
						this.warningStatisticsData = res.data;
						resolve(true)
					}).catch((error) => {
						reject(error)
					})
				})
			},
			getListAll() {
				return new Promise((resolve, reject) => {
					home.getListAll().then(res => {
						this.alarmNum = {
							...res.data.alarmNum
						}
						this.alarmNum.average = res.data.averageNum.average
						resolve(true)
					}).catch((error) => {
						reject(error)
					})
				})
			},
			queryLineChart(dateFlag = 1) {
				return new Promise((resolve, reject) => {
					home.queryLineChart({
						dateFlag
					}).then(res => {
						this.axisData = res.data
						resolve(true)
					}).catch((error) => {
						reject(error)
					})
				})
			},
			getwarningListPage() {
				if (this.params.pageNum >= this.totalPageNum) return; // 超出总页数返回
				this.status = 'loading'
				return new Promise((resolve, reject) => {
					home.getwarningListPage({
						...this.params
					}).then(res => {
						this.params.pageNum = ++this.params.pageNum; // 每次请求页数加一
						this.total = res.data.total
						// 查询出列表页数为0重置总页数否则赋值
						res.data.pages == 0 ? this.totalPageNum = undefined : this.totalPageNum = res.data
							.pages
						// 等同于总页数时设置为没有数据
						if (this.params.pageNum >= res.data.pages) this.status =
							'nomore'
						// 否则可继续加载页面
						else this.status = 'loadmore'
						res.data.records.forEach(item => {
							this.warningList.push(item)
						})
						resolve(true)
					}).catch((error) => {
						reject(error)
					})
				})
			},
			// 获取codeid给后端
			setSubscribe() {
				uni.login({
					success: res => {
						//code值(5分钟失效)
						home.setSubscribe({
							"code": res.code
						}).then(resp => {})
					}
				});
			},
			setOpenId() {
				uni.login({
					success: res => {
						//code值(5分钟失效)
						home.setOpenId({
							"code": res.code
						}).then(resp => {})
					}
				});
			}
		},

	}
</script>

<style lang="scss">
</style>